<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!-- 搜索业务-->
      <el-input v-model="query.topic" clearable placeholder="输入搜索主题" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <!-- <el-input v-model="query.kahuna" clearable placeholder="输入搜索负责人" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.wechatAccount" clearable placeholder="输入搜索平台名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-input v-model="query.shopName" clearable placeholder="输入搜索店铺名称" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" / -->

      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <el-button
        v-permission="['admin','atBusiness:add']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="add"
      >新增</el-button>
      <el-button
        type="danger"
        class="filter-item"
        size="mini"
        icon="el-icon-refresh"
        @click="toQuery"
      >刷新</el-button>
      <!--表单组件-->
      <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="title" width="600px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
          <el-form-item label="主题">
            <el-input v-model="form.topic" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="内容">
            <textarea v-model="form.content" style="width: 370px;height: 100px;"></textarea>
          </el-form-item>

          <el-form-item label="活动类型">
            <el-select v-model="form.type" clearable placeholder="请选中活动类型" class="filter-item" style="width: 370px">
              <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="小程序appid" v-if="form.type==1">
            <el-input v-model="form.appid" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="访问路径">
            <el-input v-model="form.path" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  default-time="12:00:00">
                </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  default-time="12:00:00">
                </el-date-picker>
          </el-form-item>
          <el-form-item label="是否上架">
            <el-radio v-model="form.status"  :label="0" >上架</el-radio>
            <el-radio v-model="form.status"  :label="1">下架</el-radio>

          </el-form-item>
          <el-form-item label="主图图片">
            <!-- <el-input v-model="form.url" style="width: 370px;" /> -->
              <MaterialList v-model="form.urlArr" style="width: 300px" type="image" :num="1" :width="150" :height="150" />
          </el-form-item>
          <el-form-item label="是否弹窗">
            <el-radio v-model="form.isPop"  :label="0" >否</el-radio>
            <el-radio v-model="form.isPop"  :label="1">是</el-radio>
          </el-form-item>
          <el-form-item label="弹窗背景" v-if="form.isPop==1">
            <!-- <el-input v-model="form.popUrl" style="width: 370px;" /> -->
            <MaterialList v-model="form.popUrlArr" style="width: 300px" type="image" :num="1" :width="150" :height="150" />

          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancel">取消</el-button>
          <el-button :loading="loading" type="primary" @click="submit">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;" >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号">
           <template scope="scope">
             <span>{{((page+1) - 1) * size + scope.$index + 1}}</span>
             </template>
          </el-table-column>
        <el-table-column  prop="topic" label="主题" />
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="type" label="类型" >
         <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0" style="cursor: pointer" :type="'info'">本小程序</el-tag>
            <el-tag v-else style="cursor: pointer" :type=" '' ">第三方小程序</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="appid" label="第三方小程序appid" />
        <el-table-column prop="startTime" label="开始时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="endTime" label="结束时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.endTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="status" label="是否上架" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" style="cursor: pointer" :type="'info'">下架</el-tag>
            <el-tag v-else style="cursor: pointer" :type=" '' ">上架</el-tag>
          </template>
        </el-table-column>
        <el-table-column  prop="url" label="主图图片" >
          <template slot-scope="scope">
              <el-image
                    style="width: 80px; height: 80px"
                    :src="scope.row.url"
                    :preview-src-list="[scope.row.url]"
                  ></el-image>

          </template>
        </el-table-column>
        <el-table-column  prop="isPop" label="是否弹窗" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isPop === 1" style="cursor: pointer" :type="'info'">是</el-tag>
            <el-tag v-else style="cursor: pointer" :type=" '' ">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column  prop="popUrl" label="弹窗背景" >
          <template slot-scope="scope">
              <el-image
                    style="width: 80px; height: 80px"
                    :src="scope.row.popUrl"
                    :preview-src-list="[scope.row.popUrl]"
                  ></el-image>

          </template>
        </el-table-column>
        <el-table-column  prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="updateTime" label="更新时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-permission="['admin','atActivity:edit','atActivity:del']" label="操作" width="200px" align="center">
         <template slot-scope="scope">
             <el-button
               size="mini"
               type="primary"
               icon="el-icon-edit"
               @click="edit(scope.row)"
             >
               编辑
             </el-button>
             <el-popover
               :ref="scope.row.id"
               placement="top"
               width="180"
             >
               <p>确定删除本条数据吗？</p>
               <div style="text-align: right; margin: 0">
                 <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                 <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
               </div>
               <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
             </el-popover>
         </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import {add, edit,del} from '@/api/atActivity'
import initData from '@/mixins/crud'
import checkPermission from '@/utils/permission'
import picUpload from '@/components/pic-upload'
import MaterialList from '@/components/material'

// crud交由presenter持有
export default {
 mixins: [initData],
components: { picUpload, MaterialList },
 data() {
   return {
      isAdd:true,
      loading: false, dialog: false,
      delLoading: false,
      title:"新增",
      form:{
        id: '',
        topic:"",
        type:'',
        content:"",
        popUrlArr:[],
        urlArr:[],
        path:"",
        appid:'',
        startTime :"",
        endTime :"",
        status: 0,
        url:"",
        isPop:0,
        popUrl:""
     },
     typeList:[{name:'小程序本身活动',value:'0'},{name:'第三方活动',value:'1'}],
     permission: {
       add: ['admin', 'hcsActivity:add'],
       edit: ['admin', 'hcsActivity:edit'],
       del: ['admin', 'hcsActivity:del']
     },
     rules: {
     }    }
 },
 created() {
   this.$nextTick(() => {
     this.init()
   })
 },
 watch: {
   'form.urlArr': function(val) {
     if (val) {
       this.form.url = val.join(',')
     }
   },
   'form.popUrlArr': function(val) {
     if (val) {
       this.form.popUrl = val.join(',')
     }
   }
 },
 methods: {
   checkPermission,
   beforeInit() {
     this.url = 'api/hcsActivity'
     const sort = 'id,desc'
     this.params = { page: this.page, size: this.size, sort: sort }
     return true
   },

   add(){
     this.dialog = true
     this.isAdd = true
     // this.resetForm()
   },
   submit(){
     this.loading = true
     if (this.isAdd) {
       this.doAdd()
     } else this.doEdit()
   },
   refresh(){
     this.dialog = false
     this.form = {
      id: '',
      businessName :"",
      status: 0,
      remark:""
     }
   },
   cancel(){
     this.refresh()
     this.init()
   },
   doAdd() {
     this.title = "新增"
     add(this.form).then(res => {
       this.refresh()
       this.$notify({
         title: '添加成功',
         type: 'success',
         duration: 2500
       })
       this.loading = false
       this.init()
     }).catch(err => {
       this.loading = false
       console.log(err.response.data.message)
     })
   },
   doEdit() {

     edit(this.form).then(res => {
       this.refresh()
       this.$notify({
         title: '修改成功',
         type: 'success',
         duration: 2500
       })
       this.loading = false
       this.init()
     }).catch(err => {
       this.loading = false
       console.log(err.response.data.message)
     })
   },
   subDelete(id){
     this.delLoading = true
     let ids = [id]
     del(ids).then(res => {
        this.delLoading = false
        this.$refs[id].doClose()
       this.init()
     }).catch(err => {
       this.loading = false
     })
   },
   edit(data) {
     this.title = "编辑"
     this.isAdd = false
     this.form = {
       id: data.id,
       topic:data.topic,
       content:data.content,
       popUrlArr:data.popUrl ? data.popUrl.split(',') : [],
       urlArr:data.url ? data.url.split(',') : [],
       path:data.path,
       startTime :data.startTime,
       endTime :data.endTime,
       status: data.status,
       url:data.url,
       isPop:data.isPop,
       popUrl:data.popUrl
     }
     this.dialog = true
   }

   },
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
